
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />	
	<title>袁世红博客-前端博客-前端技术-个人介绍</title>
    <meta name="keywords" content="前端知识 , CSS , javascript , jquery，PHP, Porco博客">
    <meta name="description" content="Porco个人博客。感谢haorooms的技术支持">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/change.css"/>
</head>
<body class="loading-process">
<div class="loading">
	<div class="loading-circle"></div>
	<div class="loading-avatar">
		<div id="change2">			
			<img class="img1" src="images/avata@2x.jpg" alt="" width="100" height="120">
		</div>
	</div>
</div>
<div class="section-header">
		<audio autoplay="autoplay" id="vid">
			你的浏览器不支持，请下载XXX
			<source  src="images/canon.mp3" id="source1"></source>
	</audio>
	<div class="section">
		<nav class="nav" role="navigation">
			<ul>
				<li class="nav-about fade fade1 gray"><a href="#about">关于</a></li>
				<li class="nav-works fade fade4 gray"><a href="#works">作品</a></li>
				<li class="fade back-home"><a href="#top">首页</a></li>
				<li class="nav-skill fade fade2 gray"><a href="#skill">能力</a></li>
				<li class="nav-contact fade fade3 gray"><a href="#contact">联系</a></li>
			</ul>
		</nav>
	</div>
	<div class="nav-bg"></div>
</div>
<div class="home-bg">
	<img src="images/home-bg.jpg" alt="" width="1000" height="667">
</div>
<div class="section-wrap section-fristpage" data-slide="1"  >
	<div class="section">
		<div class="section-content">
			<p class="fade fade1">Hi，我是 袁世红</p>
			<p class="fade fade2">欢迎光临袁世红博客！</p>
			<p class="fade fade3">想了解更多，往下滚动哦 ^_^</p>
		</div>
		<a class="button2 scroll-tip fade fade4" data-slide="3" title="">向下滚动</a>
	</div>
</div>
<div id="about" data-slide="2" data-stellar-background-ratio="0.3" class="section-wrap section-about">
	<div class="section">
		<div class="about-content clearfix section-content">
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-1" src="images/bio-icon-1.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content "><img class="bio-text bio-text-1 img1" src="images/bio-text-1.png" data-stellar-ratio="0.7" ></span>
			</div>
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-2" src="images/bio-icon-2.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content"><img class="bio-text bio-text-2" src="images/bio-text-2.png" data-stellar-ratio="0.7" ></span>
			</div>
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-3" src="images/bio-icon-3.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content"><img class="bio-text bio-text-3" src="images/bio-text-3.png" data-stellar-ratio="0.7" ></span>
			</div>

		</div>

	</div>
	<a class="button2 dark-button2 scroll-tip" style="background-position:0 -60px;" data-slide="3" title=""></a>
</div>
<div id="works" class="section-wrap section-works" data-slide="3" >
	<div class="section">
		<div class="works-content section-content">
			<h1>前端作品</h1>
			<div class="works-list clearfix">
				<div class="works-item first fade fade1">
					<a href="https://douxing.com/badou/www/home.html" target="_blank">
						<img src="images/dx.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>兜行官网</h2>
							<p><strong>开发时间</strong>：2016年3月<br>
							<strong>工作详情</strong>：框架设计及前端制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a href="http://mworking.cn/badou/webapp/test/index.html?t=10.12" target="_blank">
						<img src="images/douxing.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>兜行移动</h2>
							<p><strong>开发时间</strong>：2016年7月<br>
							<strong>工作详情</strong>：页面设计及前端制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade3">
					<a href="http://www.wzshijie.com/" target="_blank">
						<img src="images/lvshi.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>自媒体之家</h2>
							<p><strong>开发时间</strong>：2015年9月<br>
							<strong>工作详情</strong>：页面设计及前端绑定和制作。</p>
						</div>
					</a>
				</div>
				
				<div class="works-item first fade fade4">
					<a href="http://www.wzshijie.com/"  target="_blank">
						<img src="images/butao.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>玩赚世界官网</h2>
							<p><strong>开发时间</strong>：2015年4月<br>
							<strong>工作详情</strong>：页面设计及前端绑定和制作</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a href="https://porcomar.github.io/bidainwaimai/"  target="_blank">
						<img src="images/waimai.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>优点外卖</h2>
							<p><strong>开发时间</strong>：业余时间制作<br>
							<strong>工作详情</strong>：独立开发制作</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade3">
					<a href="http://porcomar.oschina.io/shechipin" target="_blank">
						<img src="images/ss.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>五大道奢侈品</h2>
							<p><strong>开发时间</strong>：业余时间制作<br>
							<strong>工作详情</strong>：独立开发制作</p>
						</div>
					</a>
				</div>
				
			</div>
			<a class="more-link" href="http://www.haorooms.com/page/product">查看更多</a>
		</div>
		<a class="button2 scroll-tip fade fade4" data-slide="4" title="">向下滚动</a>
	</div>
</div>
<div id="skill" class="section-wrap section-skill" data-slide="4">
	<div class="section">
		<div class="skill-content section-content">
			<h1>相关技能</h1>
			<ul>
				<li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C标准的结构和代码。</li>
				<li class="fade fade3">熟悉掌握 Javascript编程基本原理、面向对象编程以及闭包思想,与$.extend()的插件拓展</li>
				<li class="fade fade1">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
				<li class="fade fade2">对 HTML5 和 CSS3 新特性有一定了解。</li>
				<li class="fade fade4">熟悉less，有gulp+webpack开发经验，</li>
				<li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li>
				<li class="fade fade3">了解bootstrap、vue框架、Hybrid 开发模式。</li>
				<li class="fade fade2">了解 Ajax工作原理和实现方法。</li>
				<li class="fade fade2">了解Photoshop，了解一些矢量库等</li>
				<li class="fade fade1">了解手机前端开发jquerymobile，zeptojs及vue.js等。</li>
				<li class="fade fade4">熟练移动端布局，对百分比、等比例布局经验丰富 </li>
				<li class="fade fade2">喜欢接触新事物，有较很强的自学能力。</li>
			</ul>
		</div>
	</div>
	<a class="button2 scroll-tip fade fade4"  data-slide="5" title="">向下滚动</a>
</div>
<div id="contact" class="section-wrap section-contact" data-slide="5">
	<div class="section">
		<div class="contact-content clearfix section-content">
			<h1>联系本人</h1>
			<div class="left">
				<div class="contact-ways fade fade1">
					<h2>社交网络</h2>
					<ul>
						<li>邮箱：<a target="_blank" href="https://mail.qq.com/cgi-bin/frame_html?sid=1bA11pVpWl5xSHMr&url=%2Fcgi-bin%2Fmail_list%3Fsid%3D1bA11pVpWl5xSHMr%26topmails%3D0&r=9f107d5dadf89cb7e754d903971a005e">1206880864@qq.com</a></li>
						<li>Q Q ：<a target="_blank" href="#">1206880684</a></li>
						<li>知乎：<a target="_blank" href="">@yuanshihong</a></li>
						<li>微博：<a target="_blank" href="http://weibo.com/">@Y是那个H</a></li>
						<li>Github：<a target="_blank" href="https://github.com/PorcoMar">@yuanshihong</a></li>
						<li>haorooms<a target="_blank" href="http://www.haorooms.com/post/qianduan_mianshi"></a></li>
					</ul>
				</div>
				<div class="contact-info fade fade2">
					<p>虽然有社交网络，但是平时上的比较少，很多时候是只看不发！不过你可以关注我哦！</p>
				</div>
			</div>
			<div class="right fade fade3">
				<h2>项目外包</h2>
				<p>如果你有前端相关的需求，可以联系我做外包，目前我主要做：</p>
				<ul>
					<li>网站布局设计及制作，网站页面制作。</li>
					<li>根据需求，对网站前端进行修改和优化，或者转响应式处理。</li>
					<li>企业网站建设及相关功能开发。</li>
					<li>对于网站建设项目，我也有一些同行朋友可以推荐，也欢迎咨询！</li>
				</ul>
				<p><strong>合作流程</strong>：按照合作谈定的价格，预付 50% 的项目款，开始工作。完成验收后，支付尾款。</p>
				<p><strong>价格参考</strong>：视具体项目难度和工作量等，一般来说，工时价格为 150 左右。</p>
			</div>
		</div>
	</div>
	<a class="button2 button2-2-top scroll-tip" id="gototops" data-slide="1" href="#top" style="background-position: -60px 0;width:80px;height:80px;" title=""></a>
</div>
<div style="display:none"></div>
<div class="overlay"></div>
<div class="state-indicator"></div>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/js.js"></script>
<script src="js/jquery.stellar.min.js"></script>
</body>
</html>
